<div>
  <h4>single select</h4>
  <d-cascader
    [options]="options"
    [placeholder]="'please select'"
    [(ngModel)]="value1"
    (ngModelChange)="onChanges($event)"
    [trigger]="'click'"
    [width]="300"
    [dropdownWidth]="200"
    [allowClear]="true"
    [canSelectParent]="true"
  >
  </d-cascader>

  <h4>multiple mode: no checkboxRelation</h4>
  <d-cascader
    [options]="options"
    [placeholder]="'please select'"
    [(ngModel)]="value2"
    (ngModelChange)="onChanges($event)"
    [trigger]="'click'"
    [width]="300"
    [dropdownWidth]="200"
    [multiple]="true"
    [allowClear]="true"
    [canSelectParent]="true"
    [checkboxRelation]="noRelation"
  >
  </d-cascader>

  <h4>multiple mode: downward checkboxRelation</h4>
  <d-cascader
    [options]="options"
    [placeholder]="'please select'"
    [(ngModel)]="value3"
    (ngModelChange)="onChanges($event)"
    [trigger]="'click'"
    [width]="300"
    [dropdownWidth]="200"
    [multiple]="true"
    [allowClear]="true"
    [canSelectParent]="true"
    [checkboxRelation]="downward"
  >
  </d-cascader>

  <h4>multiple mode: upward checkboxRelation</h4>
  <d-cascader
    [options]="options"
    [placeholder]="'please select'"
    [(ngModel)]="value4"
    (ngModelChange)="onChanges($event)"
    [trigger]="'click'"
    [width]="300"
    [dropdownWidth]="200"
    [multiple]="true"
    [allowClear]="true"
    [canSelectParent]="true"
    [checkboxRelation]="upward"
  >
  </d-cascader>
</div>
